<template>
	<view style="padding-bottom: 130rpx;">
		<view class="formContainer">
			<uni-forms ref="form">

				<uni-forms-item label="关联订单" required>
					<view @click="chooseOrder">
						<u--input v-model="formData.orderNo" placeholder="请选择订单" :disabled="type==1?true:false"
							suffixIcon="arrow-right"></u--input>
					</view>
				</uni-forms-item>
				<uni-forms-item label="车型信息">
					<view>
						<u--input v-model="formData.modelName" placeholder="选择订单自动获取" disabled></u--input>
					</view>
				</uni-forms-item>
				<uni-forms-item label="租赁时间">
					<view>
						<u--input v-model="formData.time" placeholder="选择订单自动获取" disabled></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="费用类型" required>
					<uni-data-select v-model.number="formData.receiptBillType" :localdata="billTypes" :clear="false">
					</uni-data-select>
				</uni-forms-item>

				<uni-forms-item label="申请金额" required>
					<view>
						<u--input v-model="formData.amount" @input="check" type="digit"
							placeholder="请输入申请金额"></u--input>
					</view>
				</uni-forms-item>
				<uni-forms-item label="申请时间" required label-width="100">
					<uni-datetime-picker type="datetime" v-model="formData.applyTime" placeholder="请选择申请时间" />
				</uni-forms-item>

				<uni-forms-item label="支付凭证" labelPosition="top" labelWidth="300">
					<sr-upload ref="upload" maxCount="6" @uploadResult="uploadFile"></sr-upload>
				</uni-forms-item>

				<uni-forms-item label="备注" labelPosition="top">
					<view>
						<u--textarea v-model="formData.applyNote" placeholder="请输入200字以内的内容" count maxlength="200">
						</u--textarea>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<button type="info" class="sub-btn" @click="confimAdd">确认</button>
	</view>
</template>

<script>
	import * as paymentApplyApi from '@/api/paymentApply-api.js';
	import srUpload from '@/components/upload/sr-upload.vue'
	const moment = require('@/utils/moment.js');
	import settings from '@/settings.js'
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				type: 0,
				id: '',
				formData: {
					id: null,
					orderNo: null,
					modelName: null,
					startTime: null,
					estimateEndTime: null,
					time: null,
					receiptBillType: null,
					amount: null,
					applyTime: null,
					applyUrl: null,
					applyNote: '',
				},
				billTypes: [],
			};
		},
		onLoad(op) {
			if (op) {
				this.type = op.type;
				uni.setNavigationBarTitle({
					title: this.type == 1 ? '编辑付款申请' : '新增付款申请'
				})
			}

			if (this.type == 1) {
				this.id = op.id;
				this.getBillDetail();
			}



			this.getBillType();
		},
		methods: {
			// 选择订单
			chooseOrder() {
				if (this.type == 0) {
					uni.navigateTo({
						url: './orderList'
					})
					uni.$once('paymentApply', (order) => {
						this.formData.orderNo = order.orderNo;
						this.formData.modelName = order.modelName;
						this.formData.startTime = order.rentalStartTime;
						this.formData.estimateEndTime = order.rentalEndTime;
						this.formData.time = order.rentalStartTime + '至' + order.rentalEndTime;
					})
				} else {
					uni.$u.toast('订单信息不可编辑')
				}

			},
			getBillType() {
				paymentApplyApi.getBillType().then(res => {
					const data = res.data;
					this.billTypes = data?.map(item => {
						const obj = {
							text: item.dictLabel,
							value: Number(item.dictValue)
						}
						return obj;
					})
				})
			},
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.formData.amount = e;
				})
			},
			getBillDetail() {
				paymentApplyApi.billDetail(this.id).then(res => {
					this.formData = res.data;
					if (!this.$u.test.isEmpty(this.formData.applyUrl)) {
						const urlPaths = this.formData?.applyUrl?.split(',');
						this.$refs.upload.fileList = urlPaths.map(item => {
							return {
								message: '',
								status: 'success',
								thumb: settings.baseImageUrl + item,
								type: 'image',
								url: item
							}
						})
					}
				})
			},
			// 上传车辆初始化图片
			uploadFile(data) {
				console.log('data', data);
				this.formData.applyUrl = data;
			},
			// 确认
			confimAdd() {

				if (uni.$u.test.isEmpty(this.formData.orderNo)) {
					uni.$u.toast('请关联订单');
					return
				} else if (uni.$u.test.isEmpty(this.formData.receiptBillType)) {
					uni.$u.toast('请选择费用类型');
					return
				} else if (uni.$u.test.isEmpty(this.formData.amount)) {
					uni.$u.toast('请输入申请金额');
					return
				} else if (uni.$u.test.isEmpty(this.formData.applyTime)) {
					uni.$u.toast('请选择申请时间');
					return
				} else {
					this.formData.applyTime = moment(this.formData.applyTime).format('YYYY-MM-DD HH:mm:ss');
					if (uni.$u.test.array(this.formData.applyUrl)) {
						const url = this.formData.applyUrl;
						this.formData.applyUrl = url.join(',')
					}
					if (this.type == 1) { //编辑
						paymentApplyApi.editBill(this.formData).then(res => {
							uni.$emit("refreshPaymentApplyList");
							this.$u.toast('新增成功')
							uni.navigateBack({
								animationDuration: 300,
								delta: 1
							})
						})
					} else { //新增
						paymentApplyApi.addBill(this.formData).then(res => {
							uni.$emit("refreshPaymentApplyList");
							this.$u.toast('编辑成功')
							uni.navigateBack({
								animationDuration: 300,
								delta: 1
							})
						})
					}


				}


			}
		}
	};
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 40rpx 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>